<template>
  <div class="common-layout">
    <van-nav-bar title="首页" left-arrow @click-left="onClickLeft" />
    <van-grid class="grid" :gutter="10" :clickable="true" square :column-num="2">
      <van-grid-item icon="hot" text="热门视频" to="/hotVideo" />
      <van-grid-item icon="description" text="对账文件" to="/billFile" />
      <van-grid-item icon="todo-list-o" text="提醒事项" to="/remindList" />
      <van-grid-item icon="column" text="账单" to="/billAnalysis" />
      <van-grid-item icon="gem" text="呱呱" to="/guaguale" />
    </van-grid>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const onClickLeft = () => {
  router.push('/')
}
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;

  .grid {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
